<div id="PipelineEditWorkflow">
    <div class="ui grid">
        <div class="row">
            <div class="ui sixteen column centered">
                <div class="ui buttons">
                    <div class="ui blue button" (click)="showAsCodeEditor()">
                        <i class="terminal icon"></i> {{'workflow_edit_as_code' | translate}}
                        <i class="orange warning sign icon ml5" *ngIf="previewMode" suiPopup
                            [popupText]="'workflow_preview_mode' | translate" popupPlacement="top center">
                        </i>
                    </div>
                    <div *ngIf="previewMode" class="ui green button" (click)="savePreview()"
                        [class.disabled]="originalPipeline.from_repository">
                        <i class="save icon"></i> {{'btn_save' | translate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <ul *ngIf="pipeline" class="dragula-container" [dragula]="'bag-stage'"
                    [(dragulaModel)]="pipeline.stages">
                    <li *ngFor="let stage of pipeline.stages" class="stage" id="step{{stage.build_order}}"
                        [class.two]="pipeline.stages.length === 1" [class.three]="pipeline.stages.length === 2"
                        [class.four]="pipeline.stages.length === 3" [class.five]="pipeline.stages.length === 4"
                        [class.six]="pipeline.stages.length === 5" [class.seven]="pipeline.stages.length === 6">
                        <div class="stageItem">
                            <a class="pointing" (click)="openEditModal(stage)"><i
                                    class="setting icon"></i>{{stage.name}}</a>
                            <i class="right floated move icon"></i>
                            <ul>
                                <li *ngFor="let j of stage.jobs; let i = index" id="Job{{i}}">
                                    <div class="job ui segment pointing" [class.inactive]="!j.enabled"
                                        (click)="selectJob(j, stage)"
                                        [class.active]="j.pipeline_action_id === selectedJob?.pipeline_action_id">
                                        <span class="ellipsis" title="{{j.action.name}}">{{j.action.name}}</span>
                                    </div>
                                </li>
                                <li class="new job">
                                    <div class="new job ui segment pointing" (click)="addJob(stage)"
                                        *ngIf="!pipeline.from_repository">
                                        <span class="ellipsis" title="{{ 'step_add_job' | translate }}">
                                            {{ 'step_add_job' | translate }}
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="stage" [class.one]="pipeline.stages.length === 0"
                        [class.two]="pipeline.stages.length === 1" [class.three]="pipeline.stages.length === 2"
                        [class.four]="pipeline.stages.length === 3" [class.five]="pipeline.stages.length === 4"
                        [class.six]="pipeline.stages.length === 5" [class.seven]="pipeline.stages.length === 6"
                        *ngIf="!pipeline.from_repository">
                        <div class="new stageItem">
                            <ul>
                                <li class="job">
                                    <div id="AddStageAndJob" class="new job ui segment pointing"
                                        (click)="addStageAndJob()">
                                        <span class="ellipsis" title="{{ 'step_add_job' | translate }}">
                                            {{ 'step_add_job' | translate }}
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div *ngIf="selectedJob && pipeline" class="mb130">
        <app-action [project]="project" [suggest]="suggest" [action]="selectedJob.action" [pipeline]="pipeline"
            [stage]="selectedStage" [keys]="keys" [edit]="pipeline.permission === permissionValue.READ_WRITE_EXECUTE"
            (actionEvent)="jobEvent($event)">
        </app-action>
    </div>
</div>

<sm-modal title="{{ 'pipeline_stage_edit' | translate }}" class="fluid" #editStageModal>
    <modal-content>
        <app-pipeline-stage-form [project]="project" [pipeline]="pipeline" [stage]="selectedStage">
        </app-pipeline-stage-form>
    </modal-content>
    <modal-actions>
        <button class="ui grey button" [disabled]="loadingStage"
            (click)="editStageModal.hide()">{{ 'btn_cancel' | translate }}</button>
        <button class="ui green button" [disabled]="loadingStage || pipeline.from_repository"
            [class.loading]="loadingStage" (click)="stageEvent('update')">{{ 'btn_save' | translate }}
        </button>
        <app-delete-button (event)="stageEvent('delete')" [disabled]="pipeline.from_repository"
            *ngIf="!selectedStage?.hasChanged && pipeline.permission === permissionValue.READ_WRITE_EXECUTE">
        </app-delete-button>
    </modal-actions>
</sm-modal>
